﻿<html>  
  <head>  
        <meta charset="utf-8">  
        <title>11.4.3 标注华盛顿</title>  
  </head> 
  <style>
	.country {
		fill: #ccc;
		stroke: white;
		stroke-width: 1px;
	}
	
	.border{
		fill: none;
		stroke: black;
		stroke-width: 1px;
	}
	
	.axis {
		stroke: black;
		stroke-width: 2px;
	}
  </style>
<body>
<script src="../../d3/d3.min.js"></script>
<script>

var width = 800,
	height = 400;
	
var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);


var projection = d3.geo.equirectangular()
					.center([116.38, 39.93])			//中心设置为北京
					.scale(80)							//缩放因子
					.translate([width/2, height/2]);	//以svg区域的中心为坐标原点
					
	
var path = d3.geo.path()
				.projection(projection);
	
	
var color = d3.scale.category20();



d3.json("world_605kb.json", function(error, root) {
	if (error) 
		return console.error(error);

	var groups = svg.append("g");
		
	groups.selectAll("path")
			.data( root.features )
			.enter()
			.append("path")
			.attr("class","country")
			.attr("d",path);
			
	svg.append("rect")
		.attr("class","border")
		.attr("x",0)
		.attr("y",0)
		.attr("width",width)
		.attr("height",height);
	
	svg.append("line")
		.attr("class","axis")
		.attr("x1",0)
		.attr("y1",height/2)
		.attr("x2",width)
		.attr("y2",height/2);
		
	svg.append("line")
		.attr("class","axis")
		.attr("x1",width/2)
		.attr("y1",0)
		.attr("x2",width/2)
		.attr("y2",height);
		
	var washington = projection([-77.04,38.91]);	//获取华盛顿的投影坐标
	
	svg.append("circle")
		.attr("cx",washington[0])
		.attr("cy",washington[1])
		.attr("r",10)
		.style("fill","red");
		
	var pos = projection.invert(washington);
	
	console.log(pos);	//输出[-77.04, 38.91]
});

</script>
		
    </body>  
</html>  